<template>
<div class="country-box">
  <vue-scroll :ops="ops" ref="vs">
    <div class="country-main" ref="countryMain">

      <img class="country-map" src="static/images/country/country_map_0.jpg" alt="" v-if="!isShowCountryMap"  @click.prevent="closeCountryDetail">
      <img class="country-map" :src="'static/images/country/country_map_'+selectedCountry.id+'.jpg'" alt="" v-if="isShowCountryMap"  @click.prevent="closeCountryDetail">
      <!--<img class="country-map" src="static/images/country/country_map_0.jpg" alt="" v-show="!isShowCountryMap"  @click.prevent="closeCountryDetail">-->
      <!--<img class="country-map" v-for="(v,k) in countryList" :key="k"  :src="'static/images/country/country_map_'+v.id+'.jpg'" alt="" v-show="v.id==selectedCountry.id"  @click.prevent="closeCountryDetail">-->

      <div style="position: absolute" v-for="(v,k) in countryList" :key="k" :class="v.code" @click.prevent="countryClick(v)">

        <img style="width: 100%" :src="'static/images/country/country_name_'+v.id+'.png'" alt="">

        <div class="country-detail-box" v-if="selectedCountry" :class="selectedCountry.code+'-detail'" v-show="selectedCountry.id==v.id">
          <div class="country-detail-main">
            <div class="king-img">
              <img :src="'static/images/country/king_'+selectedCountry.id+'.png'" alt="">
            </div>
            <div class="country-detail">
              <h3>{{selectedCountry.name}}</h3>

              <p>{{selectedCountry.content}}</p>

            </div>
          </div>
          <span class="triangle"></span>
        </div>

      </div>

    </div>
  </vue-scroll>

  <div class="btn-left" @click="back">
    返回
  </div>

  <div class="btn-right" @click="setCountry">
    {{isShowCountryMap?'加入'+selectedCountry.name : '请加入一个国家'}}
    <img src="../../../static/images/country/arrow.png" alt="" v-if="isShowCountryMap">
  </div>

</div>
</template>

<script>
  import {setUser,getUser,removelocalStore} from '../../assets/js/tools';
  import {updateByUser} from '../../assets/js/getData';
  export default {
    name: "setCountry",
    data(){
      return {
        user:null,
        countryList:[//国家列表
          {id:1,code:'qi',name:'齐国',left:'55%',content:'齐国（公元前1044年~公元前221年）是周代诸侯国，始于姜子牙，是中国历史上从西周到春秋战国时期的一个诸侯国。'},
          {id:2,code:'chu',name:'楚国',left:'45%',content:'楚国（公元前1115年~公元前223年）是先秦时期位于长江流域的诸侯国，国君为芈姓、熊氏。周成王时期，封楚人首领熊绎为子爵，建立楚国。'},
          {id:3,code:'yan',name:'燕国',left:'50%',content:'燕国（公元前1044年~公元前222年）周武王建立周朝后，将召公奭封在蓟地，建立臣属西周的诸侯国燕国。'},
          {id:4,code:'han',name:'韩国',left:'35%',content:'韩国（公元前403~公元前230年）周朝的诸侯国之一，与魏国、赵国合称三晋，国君为姬姓韩氏，是晋国大夫韩武子（晋武公叔父）的后代。'},
          {id:5,code:'zhao',name:'赵国',left:'12%',content:'赵国（公元前403年~公元前222年）中国春秋战国时期诸侯国，国君嬴姓赵氏，为商朝名臣飞廉次子季胜之后，原为赵侯。'},
          {id:6,code:'wei',name:'魏国',left:'36%',content:'魏国（公元前403~公元前225年）的始祖是毕公高，毕国亡国后，毕公高之后毕万入晋。事晋献公，以功封于魏地，是为魏氏之祖。'},
          {id:7,code:'qin',name:'秦国',left:'15%',content:'秦国（公元前768年~公元前207年）是周朝时的一个诸侯国，于前230年至前221年十年间灭掉六国，建立中国历史上第一个大统一王朝。'},
        ],
        isShowCountryMap:false,
        selectedCountry:null,//当前国家
        ops: {
          vuescroll: {
            mode: 'native'
          },
          scrollPanel: {
            initialScrollX : '35%',
            speed: 300
          },
        },
      }
    },
    created(){
      this.user = getUser();
    },
    mounted(){
      // 元素的实际高度
      let h = this.$refs.countryMain.offsetHeight;
      let w = 1804*h/1208;
      this.$refs.countryMain.style.width = w+'px';
    },
    methods:{
      //选择国家
      countryClick(v){
        this.isShowCountryMap = true;
        this.selectedCountry = v;
        this.$refs['vs'].scrollTo({
          x: v.left,
          y: 0,
        })
      },
      //关闭国家介绍面板
      closeCountryDetail(){
        this.isShowCountryMap = false;
        this.selectedCountry = null;
      },
      //返回
      back(){
        removelocalStore('user');
        this.$router.go(-1);
      },
      //设置国家
      async setCountry(){
        if(!this.selectedCountry){
          return;
        }
        let params = {affiliationCountry:this.selectedCountry.id};
        let res = await updateByUser(params);
        if(res.data.reqResult.code>0){
          this.user.affiliationCountry = this.selectedCountry.id;
          setUser(this.user);
          this.$router.push({name:'home',query:{countryId:1}});
        }else {
          Toast(res.data.reqResult.msg);
        }
      }
    }
  }
</script>

<style scoped>
  .country-box{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: auto;
  }
  .country-main{
    height: 100vh;
    position: relative;
  }
  .country-map{
    width: 100%;
    height: 100%;
  }
  .qi{
    width: 26%;
    top: 32%;
    right: 13%;
  }
  .chu{
    width: 32%;
    top: 60%;
    right: 17%;
  }
  .yan{
    width: 18%;
    top: 10%;
    right: 21%;
  }
  .han{
    width: 9%;
    top: 40.5%;
    left: 49%;
  }
  .zhao{
    width: 20%;
    top: 17%;
    left: 18%;
  }
  .wei{
    width: 19%;
    top: 19%;
    left: 39%;
  }
  .qin{
    width: 35.6%;
    top: 50%;
    left: 14%;
  }
  .country-detail-box{
    width: 13rem;
    background-color: #f2dbae;
    position: absolute;
    border-radius: 5px;
    box-shadow: 0px 0px 15px 0px #5a5a5a;
    z-index: 10;
    transform: translate(-50%,-5rem);
  }
  .country-detail-box .triangle{
    position: absolute;
    height: 0;
    width: 0;
    border-left: 0.4rem solid transparent;
    border-right: 0.4rem solid transparent;
    border-top: 0.4rem solid #f2dbae;
    bottom: -0.4rem;
    left: 50%;
    transform: translateX(-50%);
  }
  .yan-detail .triangle{
    border-bottom: 0.4rem solid #f2dbae;
    border-top: none;
    top: -0.4rem;
  }
  .qi-detail{
    top: 28%;
    left: 35%;
  }
  .chu-detail{
    top: 25%;
    left: 31.5%;
  }
  .yan-detail{
    top: 94%;
    left: 26%;
    transform: translate(-50%,0.4rem);
  }
  .han-detail{
    top: 13%;
    left: 54%;
  }
  .zhao-detail{
    top: 47%;
    left: 55%;
  }
  .wei-detail{
    top: 28%;
    left: 72%;
  }
  .qin-detail{
    top: 26%;
    left: 67.5%;
  }
  .country-detail-main{
    display: flex;
    padding: 0.7rem 0.5rem;
  }
  .king-img img{
    width: 3.2rem;
  }
  .country-detail{
    padding: 0.35rem 0.55rem;
    overflow: auto;
    height: 3.2rem;
  }
  .country-detail h3{
    font-size: 0.7rem;
    color: #333333;
    line-height: 0.9rem;
  }
  .country-detail p{
    font-size: 0.6rem;
    color: #333333;
    line-height: 0.9rem;
  }
  /*滚动条样式*/
  .country-detail::-webkit-scrollbar {/*滚动条整体样式*/
    width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 8px;
  }
  .country-detail::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 3px;
    background: rgb(242,219,174);

  }
  .country-detail::-webkit-scrollbar-track {/*滚动条外层轨道*/
    border-radius: 3px;
    background: rgb(196,170,120);
  }

  .btn-left,.btn-right{
    position: fixed;
    height: 47px;
    bottom: 17px;
    color: #ECC063;
    font-size: 12px;
    padding-top: 12px;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .btn-left{
    background-image: url("../../../static/images/country/letf.png");
    width: 143px;
    left: 0;
    padding-left: 39px;
  }
  .btn-right{
    background-image: url("../../../static/images/country/right.png");
    width: 127px;
    right: 0;
    padding-left: 40px;
  }
  .btn-right img{
    width: 16px;
    margin-left: 5px;
  }
</style>
